<template>
    <div class="login-page">
        <group title="" label-width="3em" label-margin-right="2em" label-align="justify">
            <x-input title="用户名" type="tel" v-model="form.username" placeholder="11位手机号"></x-input>
            <x-input title="密码" type="password" v-model="form.password" placeholder="密码"></x-input>
            <p></p>
            <x-button type="primary" class="login_btn" :show-loading="showLoading" action-type="button" :disabled="btn_disabled" @click.native="login_func()">登录</x-button>
        </group>
    </div>
</template>
<script>
import g from "../../common/js/http.js"
import { Group, XInput, XButton } from "vux"
export default {
  components: {
    Group,
    XInput,
    XButton
  },
  data() {
    return {
      login_btn: true,
      form: {
        username: "13940217916",
        password: "123456",
        full: ""
      },
      showLoading: false
    }
  },
  computed: {
    btn_disabled() {
      var _this = this
      if (!_this.form.username == "" && !_this.form.password == "") {
        return false
      }
      return true
    }
  },
  created() {
    this.$store.state.title = "商户登录"
  },
  methods: {
    login_func() {
      var _this = this
      _this.showLoading = true
      var tel = this.form.username
      var reg = /^1[3456789]\d{9}$/
      if (!reg.test(tel)) {
        alert("请输入有效的手机号码")
        return
      }
      g.post_func(
        "/api/v1/staff/login",
        {
          username: tel,
          password: _this.form.password
        },
        function(res) {
          localStorage.setItem("token", res.data.token)
          localStorage.setItem("user", res.data.user)
          _this.$router.push("/")
        }
      )
       _this.showLoading = false
    }
  }
}
</script>
<style scoped>
.login-page {
  font-size: 96%;
}
.login_btn {
  width: 96%;
  font-size: 96%;
  margin-top: 10px;
}
.weui-cell {
  font-size: 96% !important;
}
</style>

